<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笔记详情</title>
    <#include "../common/link_css.ftl">
</head>
<body>

<!--导航-->
<#include "../common/nav.ftl">

<!--中间内容-->
<div id="waypoint" class="m-padded-tb-big animated fadeIn">
    <div class="ui m-container-big">
        <div class="ui stackable grid">
<#--            <!-- 左侧目录 &ndash;&gt;-->
<#--            <div class="two wide column m-padded-lr-responsive">-->
<#--                目录页-->
<#--            </div>-->
            <!-- 正文 -->
            <div class="twelve wide column">
                <div class="ui top attached segment">
                    <div class="ui horizontal link list">
                        <div class="item">
                            <#--                    <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">-->
                            <div class="content"><a href="#" class="header">若竹流风</a></div>
                        </div>
                        <div class="item">
                            <i class="calendar icon"></i> 2020-10-26
                        </div>
                        <div class="item">
                            <i class="eye icon"></i> 2342
                        </div>
                    </div>
                </div>
                <div class="ui  attached padded segment">
                    <!--内容-->
                    <#if user??>
                        <div class="ui right aligned basic segment">
                            <a href="/note/edit?id=${note.id}" class="ui orange basic label">编辑</a>
                        </div>
                    </#if>
                    <h2 class="ui center aligned header">${note.title}</h2>
                    <br>

                    <div id="content"
                         class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"
                         data-text="${note.htmlContent}">

                    </div>

                    <!--标签-->
<#--                    <div class="m-padded-lr-responsive">-->
<#--                        <div class="ui basic teal left pointing label">${note.tag}</div>-->
<#--                    </div>-->

                    <!--赞赏-->
                    <div class="ui center aligned basic segment">
                        <button id="payButton" class="ui orange basic circular button">赞赏</button>
                    </div>
                    <div class="ui payQR flowing popup transition hidden">
                        <div class="ui orange basic label">
                            <div class="ui images" style="font-size: inherit !important;">
                                <div class="image">
                                    <img src="img/zhifubao.jpg" alt="" class="ui rounded bordered image"
                                         style="width: 120px">
                                    <div>支付宝</div>
                                </div>
                                <div class="image">
                                    <img src="img/weixinzhifu.png" alt="" class="ui rounded bordered image"
                                         style="width: 120px">
                                    <div>微信</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="ui attached positive message">
                    <!--博客信息-->
                    <div class="ui middle aligned grid">
                        <div class="eleven wide column">
                            <ui class="list">
                                <li>作者：若竹流风（联系作者）</li>
                                <li>发表时间：2020-10-25 09:08</li>
                                <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                                <li>公众号转载：请在文末添加作者公众号二维码</li>
                            </ui>
                        </div>
                        <div class="five wide column">
                            <img src="img/weixin.jpg" alt="" class="ui right floated rounded bordered image"
                                 style="width: 110px">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 修改记录 -->
            <div class="four wide column">
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>
                                修改记录
                            </div>
                            <div class="right aligned column">
                                <a href="#" target="_blank">更多 <i class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <div class="ui fluid vertical menu">
                            <a class="item" href="#">
                                <span style="color: blue">若竹流风</span> 于 <span style="color: orange">2020-10-25 17:17</span> 修改此笔记，
                                <span style="color: red">修改了部分错误信息，更正部分图片</span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons ">
        <button type="button" class="ui toc teal button">目录</button>
<#--        <a href="#comment-container" class="ui teal button">留言</a>-->
        <button class="ui wechat icon button"><i class="weixin icon"></i></button>
        <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>
    </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
    <ol class="js-toc">

    </ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden " style="width: 130px !important;">
    <!--<img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;">-->
</div>

<br>
<br>
<!--底部footer-->
<#include "../common/footer.ftl">
<#include "../common/link_js.ftl">
<!--网页动态背景——随鼠标变换的动态线条-->
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>　　
<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
    });

    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'left center'
    });

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        position: 'left center'
    });

    var qrcode = new QRCode("qrcode", {
        text: "http://jindo.dev.naver.com/collie",
        width: 110,
        height: 110,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 500);
    });
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function (direction) {
            if (direction == 'down') {
                $('#toolbar').show(100);
            } else {
                $('#toolbar').hide(500);
            }
        }
    })
</script>
</body>
</html>